<template>
    <div class="settings-container">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <!-- 面包屑路径导航 -->
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>个人设置</el-breadcrumb-item>
                </el-breadcrumb>
                <!-- 面包屑路径导航 -->
            </div>
            <el-row>
                <el-col :span="10">
                    <el-form ref="form" :model="user" label-width="80px">
                        <el-form-item label="编号">
                            {{user.id}}
                        </el-form-item>
                        <el-form-item label="手机">
                            {{user.mobile}}
                        </el-form-item>
                        <el-form-item label="媒体名称">
                            <el-input v-model="user.name"></el-input>
                        </el-form-item>
                        <el-form-item label="媒体介绍">
                            <el-input type="textarea" v-model="user.intro"></el-input>
                        </el-form-item>
                        <el-form-item label="邮箱">
                            <el-input v-model="user.email"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button :loading="updateProfileLoading" type="primary" @click="onUpdateUser">保存</el-button>

                        </el-form-item>
                    </el-form>
                </el-col>
                <el-col :offset="2" :span="10">
                    <label for="file">
                        <el-avatar shape="square" fit="cover" :size="150" :src="user.photo"></el-avatar>
                    </label>
                    <p>点击修改头像</p>
                    <input type="file" id="file" hidden ref="file" @change="onFileChange">
                </el-col>
            </el-row>

        </el-card>
        <el-dialog title="提示" :visible.sync="dialogVisible" width="20%" append-to-body @opened="onDialogOpened" @closed=onDialogClosed>
            <div class="preview-image-wrap">
                <img class="preview-image" ref="preview-image" :src="previewImage">
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" :loading="updatePhotoLoading" @click="onUpdatePhoto">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { getUserProfile, updateUserPhoto,updateUserProfile } from "@/api/user";
import "cropperjs/dist/cropper.css";
import Cropper from "cropperjs";
import globalBus from '@/utils/global-bus';
export default {
    name: "SettingsIndex",
    data() {
        return {
            user: {
                email: "",
                id: null,
                intro: "",
                mobile: "",
                name: "",
                photo: "",
            }, //用户资料
            dialogVisible: false, //控制预览图片显示状态
            previewImage: "", //预览图片
            cropper: null, //裁切器实例
            updatePhotoLoading:false,//更新用户头像 loading 状态
            updateProfileLoading:false,//更新基本信息的 loading 状态
         
        }
    },
    created() {
        this.loadUser();
    },
    methods: {
        loadUser() {
            getUserProfile().then((res) => {
                console.log(res);
                this.user = res.data.data;
            });
        },
        onFileChange() {
            // 处于预览图片
            const file = this.$refs.file;

            const blobData = window.URL.createObjectURL(file.files[0]);

            this.previewImage = blobData;

            // 展示弹层, 预览用户选择的图片
            this.dialogVisible = true;

            // 解决选择相同文件不触发  change 事件问题
            this.$refs.file.value = "";
        },
        onDialogOpened() {
            // 图片裁切器必须基于 img 进行初始化
            // 注意： img 必须是可见状态下才能正常完成初始化 因为我们要在这里初始化裁切器
            // 所有务必要在对话框完全打开的状态去进行初始化
            // 获取图片 DOM  节点
            // const image = document.getElementById("image");
            const image = this.$refs["preview-image"];

            //  第一次初始化以后，如果预览裁切的图片发生了改变，裁切器默认不会更新
            // 如果需要预览图片发生变化更新裁切器：
            //     方式一：  裁切器.replace 方法
            //     方式二：  销毁裁切器， 重新初始化
            // 初始化裁切器
            if (this.cropper) {
                this.cropper.replace(this.previewImage);
                return;
            }
            this.cropper = new Cropper(image, {
                aspectRatio: 16 / 9,
                viewMode: 1,
                dragMode: "none",
                aspectRatio: 1,
                cropBoxResizable: false,
                background: false,
            });
        },
        onDialogClosed() {
            // 对话框关闭，销毁裁切器
            // this.cropper.destroy();
        },
        onUpdatePhoto() {
            this.updatePhotoLoading = true;
            //  获取裁切的图片对象
            this.cropper.getCroppedCanvas().toBlob((file) => {
                console.log(file);
                const fd = new FormData();
                fd.append("photo", file);
                // 请求提交 fd
                updateUserPhoto(fd).then((res) => {
                    // 关闭对话框
                    this.dialogVisible = false;
                    // 更新视图展示

                    // 直接把裁切结果的文件对象转为 blob数据本地预览
                    this.user.photo = window.URL.createObjectURL(file);

                     this.updatePhotoLoading = false;
                     this.$message({
                         type:'success',
                         message:'更新头像成功'
                     })
                    globalBus.$emit('update-user',this.user)

                    // 把服务端返回的图片进行展示有点慢
                    // this.user.photo = res.data.data.photo;
                });
            });
        },
        onUpdateUser() {
            // 表单验证
            // 验证通过，提交表单
            this.updateProfileLoading = true;
            const {name,intro,email} = this.user
           updateUserProfile({name,intro,email}).then(res=>{
               this.$message(
                   {
                       type:'success',
                       message:'保存成功'
                   }
               )
                this.updateProfileLoading = false;
                globalBus.$emit('update-user',this.user)
           })
        },
    },
};
</script>

<style scoped>
.preview-image-wrap .preview-image {
    display: block;
    max-width: 100%;
    height: 200px;
}
</style>